<template>
    <div class="content-box2"  style="" >
        <div style="margin: 20px 20px 20px 20px;  ">

            <!--<vue-preview :slides="slide1" @close="handleClose"  ></vue-preview>-->

            <div>
                <el-tag v-text="proInfo.proTitle" size="medium"></el-tag>
                <el-button @click="openUploadDialog">上传图片</el-button>
                <upload-img-dialog :addUploadDialog="addUploadDialog" ></upload-img-dialog>
            </div>
            <br/>

            <el-row :gutter="20">

                <el-col :span="4"   v-for="item in items"  :key="item.id">
                    <div style="">
                        <vmCard :editable="true" :title="item.title"
                                :photoId="item.id"
                                :proId="item.proId"
                                :img="item.img"
                                :desc="item.desc"
                                :detailUrl="item.detailUrl"
                                :editUrl="item.editUrl"
                                :rpath="item.rpath"
                                :rpath2="item.rpath2"
                                @delete-ok=" deleteOk(item) " ></vmCard>
                    </div>
                </el-col>

            </el-row>


            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.currentPage"
                    :page-sizes="[12, 18, 24]"
                    :page-size="table.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="table.total">
                </el-pagination>
            </div>

        </div>
    </div>


</template>

<script>
    import * as appServer from '../../store/appServerParams.js'
    import * as util from '../../assets/util.js';
    import UploadImgDialog from "./UploadImgDialog2";
    import vmCard from "./vm-card";

    import vueWaterfallEasy from 'vue-waterfall-easy'

    export default {
        components: {UploadImgDialog , vmCard , vueWaterfallEasy },
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                uploadUrl : appServer.BASE_URL+"/photo/uploadPhotos" ,
                headerInfo:{
                    Authorization:util.local(appServer.TOKEN)
                },
                addUploadDialog: false,
                items: [] ,
                projectId: -1,
                table : {
                    currentPage : 1,
                    pageSize : 12,
                    total : 0
                },
                proInfo :{
                    proTitle : "",
                },
            };
        },
        methods: {
            deleteOk(){
                let vm = this;
                vm.$message({
                    message: vm.$t('Success'),
                    type: 'success'
                });
                this.getImgFromServer();
            },
            handleSizeChange(val) {
                let vm = this
                vm.table.pageSize = val
                vm.getImgFromServer()
            },
            handleCurrentChange(val) {
                let vm = this
                vm.table.currentPage = val
                vm.getImgFromServer()
            },
            // handlePictureCardPreview(file) {
            //     this.dialogImageUrl = file.url;
            //     this.dialogVisible = true;
            // },
            openUploadDialog() {
                this.addUploadDialog = true;
            },
            getImgFromServer(){
                let vm = this;
                let args = {
                    projectId: vm.projectId,
                    currentPage: vm.table.currentPage,
                    pageSize: vm.table.pageSize,
                };
                vm.$http.get('guest/getImgsByPro', {params:args})
                    .then(function (response) {
                        if (response.data.result) {
                            let imgs = response.data.imgs;
                            let tmpArr = [];
                            for (let imgIndex in imgs) {
                                let tmpServerImg = imgs[imgIndex];
                                let tmpImg = {};
                                tmpImg.title = tmpServerImg.imgTitle;
                                tmpImg.desc = tmpServerImg.imgDesc;
                                tmpImg.detailUrl = appServer.BASE_URL + tmpServerImg.imgPath;
                                tmpImg.img = appServer.BASE_URL + tmpServerImg.img2Path;
                                tmpImg.editUrl = appServer.BASE_URL + tmpServerImg.img2Path;
                                tmpImg.id = tmpServerImg.pid;
                                tmpImg.proId = tmpServerImg.projectId;

                                tmpImg.rpath = tmpServerImg.imgPath;
                                tmpImg.rpath2 = tmpServerImg.img2Path;
                                tmpArr.push(tmpImg);
                            }
                            vm.items = tmpArr;
                            vm.table.total = response.data.total;

                            if( response.data.proTitle!=null ){
                                vm.proInfo.proTitle = response.data.proTitle;
                            }
                        }
                }).catch(function (error) {
                    console.log(error)
                })


            },
        },
        created: function () {
            this.projectId = this.$route.query.pid;

            let vm = this
            vm.getImgFromServer();
        },
        mounted(){

        },

    }
</script>

